@charset "utf-8";
@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: strawberryicon;
    src: url(fonts/strawberryicon.eot?ayv2mh);
    src: url(fonts/strawberryicon.eot?ayv2mh#iefix) format('embedded-opentype'), url(fonts/strawberryicon.ttf?ayv2mh) format('truetype'), url(fonts/strawberryicon.woff?ayv2mh) format('woff'), url(fonts/strawberryicon.svg?ayv2mh#strawberryicon) format('svg')
}

[class*=" czs-"], [class^=czs-] {
    text-transform: none;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-family: strawberryicon !important;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.czs-add:before {
    content: "\e900"
}

.czs-airplane:before {
    content: "\e901"
}

.czs-airplane-l:before {
    content: "\e902"
}

.czs-alipay:before {
    content: "\e903"
}

.czs-analysis:before {
    content: "\e904"
}

.czs-android:before {
    content: "\e905"
}

.czs-angle-down-l:before {
    content: "\e917"
}

.czs-angle-left-l:before {
    content: "\e907"
}

.czs-angle-right-l:before {
    content: "\e908"
}

.czs-angle-up-l:before {
    content: "\e909"
}

.czs-apple:before {
    content: "\e90a"
}

.czs-arrow-down-l:before {
    content: "\e90b"
}

.czs-arrow-up-l:before {
    content: "\e90c"
}

.czs-aso-l:before {
    content: "\e90d"
}

.czs-association-l:before {
    content: "\e90e"
}

.czs-baiduwangpan:before {
    content: "\e90f"
}

.czs-bar-chart:before {
    content: "\e910"
}

.czs-bar-chart-l:before {
    content: "\e911"
}

.czs-battery:before {
    content: "\e912"
}

.czs-battery-l:before {
    content: "\e913"
}

.czs-bell:before {
    content: "\e914"
}

.czs-bell-l:before {
    content: "\e915"
}

.czs-bilibili:before {
    content: "\e916"
}

.czs-bitcoin:before {
    content: "\e9177"
}

.czs-blackboard-l:before {
    content: "\e918"
}

.czs-bluetooth:before {
    content: "\e919"
}

.czs-bluetooth-l:before {
    content: "\e91a"
}

.czs-board:before {
    content: "\e91b"
}

.czs-board-l:before {
    content: "\e91c"
}

.czs-book:before {
    content: "\e91d"
}

.czs-book-l:before {
    content: "\e91e"
}

.czs-bookmark:before {
    content: "\e91f"
}

.czs-bookmark-l:before {
    content: "\e920"
}

.czs-briefcase:before {
    content: "\e921"
}

.czs-briefcase-l:before {
    content: "\e922"
}

.czs-brush:before {
    content: "\e923"
}

.czs-brush-l:before {
    content: "\e924"
}

.czs-bug:before {
    content: "\e925"
}

.czs-bug-l:before {
    content: "\e926"
}

.czs-building:before {
    content: "\e927"
}

.czs-building-l:before {
    content: "\e928"
}

.czs-buy:before {
    content: "\e929"
}

.czs-buy-l:before {
    content: "\e92a"
}

.czs-calculator:before {
    content: "\e92b"
}

.czs-calculator-l:before {
    content: "\e92c"
}

.czs-calendar:before {
    content: "\e92d"
}

.czs-calendar-l:before {
    content: "\e92e"
}

.czs-camber:before {
    content: "\e92f"
}

.czs-camber-l:before {
    content: "\e930"
}

.czs-camber-o:before {
    content: "\e931"
}

.czs-camera:before {
    content: "\e932"
}

.czs-camera-l:before {
    content: "\e933"
}

.czs-caomei:before {
    content: "\e934"
}

.czs-category-l:before {
    content: "\e935"
}

.czs-certificate:before {
    content: "\e936"
}

.czs-chemistry:before {
    content: "\e937"
}

.czs-chemistry-l:before {
    content: "\e938"
}

.czs-choose-list-l:before {
    content: "\e939"
}

.czs-chrome:before {
    content: "\e93a"
}

.czs-chuangzaoshi:before {
    content: "\e93b"
}

.czs-circle:before {
    content: "\e93c"
}

.czs-circle-l:before {
    content: "\e93d"
}

.czs-circle-o:before {
    content: "\e93e"
}

.czs-clip-l:before {
    content: "\e93f"
}

.czs-clock:before {
    content: "\e940"
}

.czs-clock-l:before {
    content: "\e941"
}

.czs-close-l:before {
    content: "\e942"
}

.czs-clothes:before {
    content: "\e943"
}

.czs-clothes-l:before {
    content: "\e944"
}

.czs-cloud:before {
    content: "\e945"
}

.czs-cloud-l:before {
    content: "\e946"
}

.czs-code-branch:before {
    content: "\e947"
}

.czs-code-edit-l:before {
    content: "\e948"
}

.czs-code-file:before {
    content: "\e949"
}

.czs-code-file-l:before {
    content: "\e94a"
}

.czs-code-fork:before {
    content: "\e94b"
}

.czs-code-l:before {
    content: "\e94c"
}

.czs-code-plugin-l:before {
    content: "\e94d"
}

.czs-coin:before {
    content: "\e94e"
}

.czs-coin-l:before {
    content: "\e94f"
}

.czs-collection:before {
    content: "\e950"
}

.czs-come-l:before {
    content: "\e951"
}

.czs-command:before {
    content: "\e952"
}

.czs-command-2:before {
    content: "\e953"
}

.czs-command-l:before {
    content: "\e954"
}

.czs-comment:before {
    content: "\e955"
}

.czs-comment-l:before {
    content: "\e956"
}

.czs-computer:before {
    content: "\e957"
}

.czs-computer-l:before {
    content: "\e958"
}

.czs-configuration:before {
    content: "\e959"
}

.czs-connection:before {
    content: "\e95a"
}

.czs-construct-l:before {
    content: "\e95b"
}

.czs-container-l:before {
    content: "\e95c"
}

.czs-control:before {
    content: "\e95d"
}

.czs-control-rank:before {
    content: "\e95e"
}

.czs-crown:before {
    content: "\e95f"
}

.czs-crown-l:before {
    content: "\e960"
}

.czs-css3:before {
    content: "\e961"
}

.czs-cup:before {
    content: "\e962"
}

.czs-cup-l:before {
    content: "\e963"
}

.czs-data-test:before {
    content: "\e964"
}

.czs-design-edit-l:before {
    content: "\e965"
}

.czs-design-shape-l:before {
    content: "\e966"
}

.czs-detect-l:before {
    content: "\e967"
}

.czs-d-glasses:before {
    content: "\e968"
}

.czs-diamond-l:before {
    content: "\e969"
}

.czs-doc-edit:before {
    content: "\e96a"
}

.czs-doc-file:before {
    content: "\e96b"
}

.czs-doc-file-l:before {
    content: "\e96c"
}

.czs-download-l:before {
    content: "\e96d"
}

.czs-dribbble:before {
    content: "\e96e"
}

.czs-dropbox:before {
    content: "\e96f"
}

.czs-d-space:before {
    content: "\e970"
}

.czs-eye:before {
    content: "\e971"
}

.czs-eye-l:before {
    content: "\e972"
}

.czs-facebook:before {
    content: "\e973"
}

.czs-file:before {
    content: "\e974"
}

.czs-file-l:before {
    content: "\e975"
}

.czs-film:before {
    content: "\e976"
}

.czs-film-l:before {
    content: "\e977"
}

.czs-fire-l:before {
    content: "\e978"
}

.czs-firewall:before {
    content: "\e979"
}

.czs-firewall-l:before {
    content: "\e97a"
}

.czs-folder-l:before {
    content: "\e97b"
}

.czs-font:before {
    content: "\e97c"
}

.czs-forum:before {
    content: "\e97d"
}

.czs-game:before {
    content: "\e97e"
}

.czs-game-l:before {
    content: "\e97f"
}

.czs-geometry-shape-l:before {
    content: "\e980"
}

.czs-gift:before {
    content: "\e981"
}

.czs-gift-l:before {
    content: "\e982"
}

.czs-github:before {
    content: "\e983"
}

.czs-github-logo:before {
    content: "\e984"
}

.czs-git-l:before {
    content: "\e985"
}

.czs-greatwall:before {
    content: "\e986"
}

.czs-hacker:before {
    content: "\e987"
}

.czs-hand-bevel:before {
    content: "\e988"
}

.czs-hand-button:before {
    content: "\e989"
}

.czs-hande-vertical:before {
    content: "\e98a"
}

.czs-hand-gather:before {
    content: "\e98b"
}

.czs-hand-grasp:before {
    content: "\e98c"
}

.czs-hand-horizontal:before {
    content: "\e98d"
}

.czs-hand-pointer:before {
    content: "\e98e"
}

.czs-hand-slide:before {
    content: "\e98f"
}

.czs-hand-stop:before {
    content: "\e990"
}

.czs-hand-touch:before {
    content: "\e991"
}

.czs-headset:before {
    content: "\e992"
}

.czs-headset-l:before {
    content: "\e993"
}

.czs-heart:before {
    content: "\e994"
}

.czs-heart-l:before {
    content: "\e995"
}

.czs-home:before {
    content: "\e996"
}

.czs-home-l:before {
    content: "\e997"
}

.czs-html5:before {
    content: "\e998"
}

.czs-image:before {
    content: "\e999"
}

.czs-image-l:before {
    content: "\e99a"
}

.czs-inbox:before {
    content: "\e99b"
}

.czs-inbox-l:before {
    content: "\e99c"
}

.czs-info-l:before {
    content: "\e99d"
}

.czs-Instagram:before {
    content: "\e99e"
}

.czs-keyboard:before {
    content: "\e99f"
}

.czs-keyboard-l:before {
    content: "\e9a0"
}

.czs-label-info-l:before {
    content: "\e9a1"
}

.czs-laptop:before {
    content: "\e9a2"
}

.czs-laptop-l:before {
    content: "\e9a3"
}

.czs-layers:before {
    content: "\e9a4"
}

.czs-layout-grid:before {
    content: "\e9a5"
}

.czs-layout-grids:before {
    content: "\e9a6"
}

.czs-layout-list:before {
    content: "\e9a7"
}

.czs-light:before {
    content: "\e9a8"
}

.czs-light-flash-l:before {
    content: "\e9a9"
}

.czs-light-l:before {
    content: "\e9aa"
}

.czs-lightning:before {
    content: "\e9ab"
}

.czs-lightning-l:before {
    content: "\e9ac"
}

.czs-link-l:before {
    content: "\e9ad"
}

.czs-linux:before {
    content: "\e9ae"
}

.czs-list-clipboard:before {
    content: "\e9af"
}

.czs-list-clipboard-l:before {
    content: "\e9b0"
}

.czs-location:before {
    content: "\e9b1"
}

.czs-location-l:before {
    content: "\e9b2"
}

.czs-lock:before {
    content: "\e9b3"
}

.czs-lock-l:before {
    content: "\e9b4"
}

.czs-map:before {
    content: "\e9b5"
}

.czs-map-l:before {
    content: "\e9b6"
}

.czs-medal:before {
    content: "\e9b7"
}

.czs-medal-l:before {
    content: "\e9b8"
}

.czs-menu-l:before {
    content: "\e9b9"
}

.czs-message:before {
    content: "\e9ba"
}

.czs-message-l:before {
    content: "\e9bb"
}

.czs-microchip:before {
    content: "\e9bc"
}

.czs-microchip-l:before {
    content: "\e9bd"
}

.czs-microphone:before {
    content: "\e9be"
}

.czs-microphone-l:before {
    content: "\e9bf"
}

.czs-microsoft:before {
    content: "\e9c0"
}

.czs-mobile:before {
    content: "\e9c1"
}

.czs-mobile-l:before {
    content: "\e9c2"
}

.czs-moments:before {
    content: "\e9c3"
}

.czs-money:before {
    content: "\e9c4"
}

.czs-mouse:before {
    content: "\e9c5"
}

.czs-mouse-l:before {
    content: "\e9c6"
}

.czs-music:before {
    content: "\e9c7"
}

.czs-music-file:before {
    content: "\e9c8"
}

.czs-music-file-l:before {
    content: "\e9c9"
}

.czs-music-l:before {
    content: "\e9ca"
}

.czs-music-note:before {
    content: "\e9cb"
}

.czs-music-note-l:before {
    content: "\e9cc"
}

.czs-network-l:before {
    content: "\e9cd"
}

.czs-new-l:before {
    content: "\e9ce"
}

.czs-newspaper-l:before {
    content: "\e9cf"
}

.czs-operation:before {
    content: "\e9d0"
}

.czs-out-l:before {
    content: "\e9d1"
}

.czs-overlapping:before {
    content: "\e9d2"
}

.czs-pad:before {
    content: "\e9d3"
}

.czs-paper:before {
    content: "\e9d4"
}

.czs-paper-plane:before {
    content: "\e9d5"
}

.czs-pause-l:before {
    content: "\e9d6"
}

.czs-paypal:before {
    content: "\e9d7"
}

.czs-pen:before {
    content: "\e9d8"
}

.czs-pen-write:before {
    content: "\e9d9"
}

.czs-people:before {
    content: "\e9da"
}

.czs-pinterest:before {
    content: "\e9db"
}

.czs-pixels:before {
    content: "\e9dc"
}

.czs-platform:before {
    content: "\e9dd"
}

.czs-play-l:before {
    content: "\e9de"
}

.czs-pokemon-ball:before {
    content: "\e9df"
}

.czs-printer:before {
    content: "\e9e0"
}

.czs-printer-l:before {
    content: "\e9e1"
}

.czs-product-l:before {
    content: "\e9e2"
}

.czs-program:before {
    content: "\e9e3"
}

.czs-program-framework-l:before {
    content: "\e9e4"
}

.czs-prototype:before {
    content: "\e9e5"
}

.czs-prototype-select-l:before {
    content: "\e9e6"
}

.czs-qq:before {
    content: "\e9e7"
}

.czs-qrcode-l:before {
    content: "\e9e8"
}

.czs-quote-left:before {
    content: "\e9e9"
}

.czs-quote-right:before {
    content: "\e9ea"
}

.czs-qzone:before {
    content: "\e9eb"
}

.czs-raspberry:before {
    content: "\e9ec"
}

.czs-read:before {
    content: "\e9ed"
}

.czs-read-l:before {
    content: "\e9ee"
}

.czs-red-envelope:before {
    content: "\e9ef"
}

.czs-right-clipboard:before {
    content: "\e9f0"
}

.czs-right-clipboard-l:before {
    content: "\e9f1"
}

.czs-rocket:before {
    content: "\e9f2"
}

.czs-rocket-l:before {
    content: "\e9f3"
}

.czs-rollerbrush:before {
    content: "\e9f4"
}

.czs-rollerbrush-l:before {
    content: "\e9f5"
}

.czs-rss:before {
    content: "\e9f6"
}

.czs-ruler:before {
    content: "\e9f7"
}

.czs-ruler-l:before {
    content: "\e9f8"
}

.czs-save:before {
    content: "\e9f9"
}

.czs-save-l:before {
    content: "\e9fa"
}

.czs-scan-l:before {
    content: "\e9fb"
}

.czs-scissors:before {
    content: "\e9fc"
}

.czs-search-l:before {
    content: "\e9fd"
}

.czs-server:before {
    content: "\e9fe"
}

.czs-server-l:before {
    content: "\e9ff"
}

.czs-servers:before {
    content: "\ea00"
}

.czs-setting:before {
    content: "\ea01"
}

.czs-setting-l:before {
    content: "\ea02"
}

.czs-share:before {
    content: "\ea03"
}

.czs-shield-l:before {
    content: "\ea04"
}

.czs-shopping-cart:before {
    content: "\ea05"
}

.czs-shopping-cart-l:before {
    content: "\ea06"
}

.czs-site-folder-l:before {
    content: "\ea07"
}

.czs-slider-l:before {
    content: "\ea08"
}

.czs-square:before {
    content: "\ea09"
}

.czs-square-l:before {
    content: "\ea0a"
}

.czs-square-o:before {
    content: "\ea0b"
}

.czs-star:before {
    content: "\ea0c"
}

.czs-star-l:before {
    content: "\ea0d"
}

.czs-steam:before {
    content: "\ea0e"
}

.czs-storage-l:before {
    content: "\ea0f"
}

.czs-sword-l:before {
    content: "\ea10"
}

.czs-tab:before {
    content: "\ea11"
}

.czs-tab-select:before {
    content: "\ea12"
}

.czs-tag:before {
    content: "\ea13"
}

.czs-tag-l:before {
    content: "\ea14"
}

.czs-taiji:before {
    content: "\ea15"
}

.czs-talk:before {
    content: "\ea16"
}

.czs-talk-l:before {
    content: "\ea17"
}

.czs-taobao:before {
    content: "\ea18"
}

.czs-telegram:before {
    content: "\ea19"
}

.czs-thumbs-up:before {
    content: "\ea1a"
}

.czs-thumbs-up-l:before {
    content: "\ea1b"
}

.czs-time:before {
    content: "\ea1c"
}

.czs-time-l:before {
    content: "\ea1d"
}

.czs-time-plugin-l:before {
    content: "\ea1e"
}

.czs-tmall:before {
    content: "\ea1f"
}

.czs-transmission-l:before {
    content: "\ea20"
}

.czs-trash:before {
    content: "\ea21"
}

.czs-trash-l:before {
    content: "\ea22"
}

.czs-triangle:before {
    content: "\ea23"
}

.czs-triangle-l:before {
    content: "\ea24"
}

.czs-triangle-o:before {
    content: "\ea25"
}

.czs-truck:before {
    content: "\ea26"
}

.czs-truck-l:before {
    content: "\ea27"
}

.czs-twitter:before {
    content: "\ea28"
}

.czs-upload-l:before {
    content: "\ea29"
}

.czs-usb:before {
    content: "\ea2a"
}

.czs-usb-l:before {
    content: "\ea2b"
}

.czs-user:before {
    content: "\ea2c"
}

.czs-user-framework:before {
    content: "\ea2d"
}

.czs-user-l:before {
    content: "\ea2e"
}

.czs-v2ex:before {
    content: "\ea2f"
}

.czs-vector-design:before {
    content: "\ea30"
}

.czs-video-camera-l:before {
    content: "\ea31"
}

.czs-video-file:before {
    content: "\ea32"
}

.czs-video-file-l:before {
    content: "\ea33"
}

.czs-vimeo:before {
    content: "\ea34"
}

.czs-volume:before {
    content: "\ea35"
}

.czs-volume-l:before {
    content: "\ea36"
}

.czs-volume-x-l:before {
    content: "\ea37"
}

.czs-watch:before {
    content: "\ea38"
}

.czs-watch-l:before {
    content: "\ea39"
}

.czs-webcam:before {
    content: "\ea3a"
}

.czs-webcam-l:before {
    content: "\ea3b"
}

.czs-web-edit:before {
    content: "\ea3c"
}

.czs-weibo:before {
    content: "\ea3d"
}

.czs-weixin:before {
    content: "\ea3e"
}

.czs-weixinzhifu:before {
    content: "\ea3f"
}

.czs-wifi:before {
    content: "\ea40"
}

.czs-wordpress:before {
    content: "\ea41"
}

.czs-world-l:before {
    content: "\ea42"
}

.czs-wrench-l:before {
    content: "\ea43"
}

.czs-write-l:before {
    content: "\ea44"
}

.czs-x-buy-l:before {
    content: "\ea45"
}

.czs-youtube:before {
    content: "\ea46"
}

.czs-zhihu:before {
    content: "\ea47"
}

/**草莓图标结束**/
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: 0 0;
    vertical-align: baseline;
    font-size: 100%
}

*, :after, :before {
    box-sizing: border-box
}

html {
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
}

a {
    color: #323232;
    text-decoration: none
}

a:hover {
    color: #4299e8
}

/* ScrollBar */

::-webkit-scrollbar-thumb {
    background-color: #2ae;
    height: 50px;
    outline-offset: -2px;
    outline: 2px solid #ddd;
    border: 2px solid #ddd;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2cc;
    height: 50px;
    border-radius: 5px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track-piece {
    background-color: #ddd;
    -webkit-border-radius: 0;
}

::selection {
    background: #111;
    color: #fff;
    text-shadow: none;
}

::-moz-placeholder {
    color: rgba(196, 227, 255, .6)
}

::-webkit-input-placeholder {
    color: rgba(196, 227, 255, .6)
}

:-ms-input-placeholder {
    color: rgba(196, 227, 255, .6)
}

.fl {
    float: left
}

.fr {
    float: right
}

sub, sup {
    position: relative;
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0
}

sup {
    top: -.5em
}

.page-wrapper {
    overflow-x: hidden;
    width: 100%
}

.header {
    overflow: hidden;
    width: 100%;
    background: #026fce;
    background: linear-gradient(45deg, #0b4182 1%, #1e88e5 64%, #40baf5 97%);
    background-image: -webkit-linear-gradient(45deg, #0b4182 1%, #1e88e5 64%, #40baf5 97%);
    background-image: linear-gradient(45deg, #0b4182 1%, #1e88e5 64%, #40baf5 97%);
    text-align: center
}

.site-title {
    margin-right: auto;
    margin-left: auto;
    padding: 60px 0 30px;
    max-width: 610px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 33px;
    font-family: -webkit-pictograph;
    line-height: 46px
}

.site-title a {
    color: #fff;
    transition: none
}

.header .form {
    float: none;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    padding: 0;
    width: auto;
    max-width: 610px
}

.input-icon {
    position: relative
}

.input-icon > .form-control:first-child {
    padding-right: 50px
}

.header .form .form-control {
    display: block;
    padding: 10px 20px;
    width: 100%;
    height: 56px;
    outline: 0;
    border: none;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 1pc;
    line-height: 24px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control:hover {
    outline: 0;
    border-color: #1e88e5;
    box-shadow: -2px 10px 15px #0000d inset
}

.btn-icon {
    position: absolute;
    top: 0;
    right: 5px;
    display: inline-block;
    margin-bottom: 0;
    padding: 10px 15px;
    height: 56px;
    outline: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    line-height: 13px;
    cursor: pointer;
    -webkit-transition: all ease-in .15s;
    transition: all ease-in .15s;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-transition: all ease-in .15s
}

.header .czs-search-l:before {
    color: rgba(196, 227, 255, .6);
    content: "\e9fd";
    font-size: 22px
}

.header .store-type {
    margin-bottom: 40px
}

.header .store-btn {
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px 1pc;
    width: 145px;
    border: 1px solid #fff;
    border-radius: 3px;
    background-color: transparent;
    background-image: none;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    font-weight: 400;
    font-size: 1pc;
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

.header .store-btn:hover {
    background: #fff;
    color: #4299e8
}

.page-main {
    margin: 40px auto;
    flex: 1 0 auto
}

.grid {
    display: flex;
    margin: 0 auto;
    max-width: 75pc;
    flex-wrap: wrap
}

.grid, .grid-col {
    padding-right: 1pc;
    padding-left: 1pc
}

.grid-col {
    width: 100%
}

.grid-col-2 {
    width: 50%
}

.grid-col-3 {
    width: 33.3333333333%
}

.page-main .theme-card {
    position: relative;
    margin-bottom: 2pc;
    padding: 1pc;
    height: calc(100% - 2pc);
    border-radius: 2px;
    background-color: #d8f1fe;
    background: #d8f1fe;
    background: linear-gradient(45deg, #dff2ff 1%, #f4faff 64%, #daf3ff 97%);
    background-image: -webkit-linear-gradient(45deg, #dff2ff 1%, #f4faff 64%, #daf3ff 97%);
    background-image: linear-gradient(45deg, #dff2ff 1%, #f4faff 64%, #daf3ff 97%);
}

.page-main .theme-card .theme-card-image {
    margin-bottom: 1pc;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.page-main .theme-card .theme-card-image:after {
    display: block;
    padding-bottom: 56.25%;
    width: 100%;
    content: ''
}

.page-main .theme-card-title {
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    font-size: 1pc
}

.page-main .is_top {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: url(../img/is_top_big.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.page-main .heading {
    position: relative;
    margin: 10px 0 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    font-family: Microsoft Jhenghei;
    line-height: 0
}

.page-main .heading-title {
    position: relative;
    z-index: 1;
    padding: 0 8px;
    background-color: #fff
}

.page-main .heading:after {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-bottom: 1px solid #1b1b1d;
    content: ''
}

.page-main .text-center {
    overflow: hidden;
    margin-bottom: 20px;
    padding: 25px;
    text-align: center
}

.page-main .text-center .btn {
    margin: 0 auto;
    padding: 10px 35px;
    border-radius: 3px;
    background: #4299e8;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    font-size: 1pc;
    cursor: pointer
}

.page-main .text-center .btn:hover {
    background: #4382dc
}

.page-main .link-item {
    overflow: hidden;
    margin: 0;
    padding: 10px 5px;
    border-bottom: 1px dashed #dadada
}

.page-main .link-item .fa {
    float: left;
    margin-right: 20px;
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: #4299e8;
    color: #fff;
    text-align: center;
    font-size: 22px;
    line-height: 2.2pc
}

.page-main .link-item:hover .fa {
    border: 2px solid #4299e8;
    background: #fff;
    color: #4299e8
}

.page-main .link-item .fl .source {
    border: 1px dashed #dadada;
    border-radius: 3px;
    padding: 1px 3px;
    margin: 0px 5px 0px 0px;
}

.page-main .link-item .fr .tag {
    border: 1px dashed #dadada;
    border-radius: 3px;
    padding: 1px 3px;
    margin: 0px 0px 0px 5px
}

.page-main .link-info h2 {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 1pc
}

.page-main .link-meta {
    color: #adadad;
    font-size: 10px
}

.footer {
    overflow: hidden;
    padding: 20px 0 10px;
    background: #eee;
    color: #656565;
    font-size: 14px
}

.footer .grid h3 {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 5px;
    font-size: 1pc
}

.footer .grid h3:after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #282828;
    content: "";
    -webkit-transition: .5s;
    transition: .5s
}

.footer .grid p {
    text-align: center;
    text-shadow: 1px 1px 0 #fdfdfd;
    line-height: 28px
}

.footer .grid p .btn-cate {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #4f99e8;
    border-radius: 3px;
    background: #4f99e8;
    color: #fff;
    text-shadow: none;
    line-height: 45px
}

.footer .grid p .btn-cate:hover {
    border: 1px solid #4f99e8;
    background: 0 0;
    color: #656565
}

.footer .grid small {
    color: #656565;
    font-size: 9pt
}

.footer .grid small font {
    border-radius: 2px;
    background: #4e99e8;
    color: #fff;
    text-shadow: none
}

.footer .grid ul {
    list-style: none
}

.footer .grid ul li {
    overflow: hidden;
    color: #6b6b6b;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 0 #fdfdfd;
    white-space: nowrap;
    line-height: 28px;
    zoom: 1;
    -o-text-overflow: ellipsis
}

.footer .grid ul li:before {
    content: '\25C6'
}

.footer-copyright {
    padding-top: 15px;
    border-top: 1px dashed #d8d8d8;
    line-height: 20px
}

.post {
    overflow: hidden;
    margin: 0 auto;
    padding: 40px 10px;
    width: 885pt
}

.sidebar {
    position: relative;
    float: left;
    width: 20pc
}

.doc {
    float: right;
    padding: 0 20px 20px;
    width: 820px;
    background: #fff
}

.doc .doc_header {
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #eee
}

.doc .doc_header h1 {
    font-size: 30px;
    font-family: Simsun
}

.doc .doc_header .meta {
    color: #a7a7a7;
    font-size: 9pt
}

.doc .doc_content {
    line-height: 2pc
}

.doc .doc_content mark {
    background: #ff0;
}

.doc .doc_content p {
    margin-bottom: 10px;
    word-break: break-all
}

.doc .doc_content a {
    border-bottom: 1px dotted
}

.doc .doc_content blockquote {
    margin: 0 0 10px;
    padding: 10px;
    border-left: 3px solid #c0d2e2;
    background: #def0ff
}

.doc .doc_content blockquote p {
    margin: 5px 0
}

.doc .doc_content h1 {
    margin-bottom: 10px;
    font-size: 1.4em
}

.doc .doc_content h2 {
    margin-bottom: 10px;
    font-size: 27px;
    font-family: monospace;
    padding: 5px 0;
    font-weight: bold;
}

.doc .doc_content h3 {
    margin-bottom: 10px;
    font-size: 1em
}

.doc .doc_content hr {
    margin: 2em auto;
    margin-left: 10pc;
    width: 20pc;
    height: 0;
    border: 1px dotted #479631;
    border-width: 2px 0 0
}

.doc .doc_content ul {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 30px
}

.doc .doc_content ol {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 30px;
}

.doc .doc_content ol, .doc .doc_content ul {
    margin-bottom: 10px;
    color: #8c8c8c
}

.doc .doc_content img {
    max-width: 100%;
    border: 3px solid #eee
}

.doc .doc_content pre {
    overflow: auto;
    margin-bottom: 10px;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
    word-break: break-word
}

.doc .doc_content pre code {
    padding: 10px
}

.doc .doc_content table {
    margin: 10px 0;
    border-top: 1px solid #367325;
    border-left: 1px solid #367325
}

.doc .doc_content table th {
    background-color: #479631;
    text-align: center
}

.doc .doc_content table td, .doc .doc_content table th {
    padding: 5px 10px;
    border-right: 1px solid #367325;
    border-bottom: 1px solid #367325
}

.doc .doc_content table tr:nth-child(2n) {
    background-color: #f2fdff
}

.doc .doc_content code {
    display: -webkit-inline-box;
    margin: 0;
    padding: 0 5px;
    border-right: 1px solid #d1e5eb;
    border-bottom: 1px solid #cfe3ea;
    border-radius: 3px;
    background: #e1f6ff;
    color: #80969e;
    font-size: 14px;
    font-family: Microsoft Yahei;
    line-height: 28px
}

.doc fieldset {
    border: 1px dashed #000;
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 13px;
    margin-top: 50px;
}

.doc legend {
    color: #FFFFFF;
    width: 200px;
    text-align: center;
    border-radius: 5px;
    background-color: #000;
    font-size: 14px;
}

.doc .fieldbox {
    padding: 5px;
}

.doc .download {
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    width: auto;
    border: 1px solid #eee;
    background: #f8f8f8
}

.doc .download .down-title {
    margin: 10px;
    text-align: center;
    letter-spacing: 8px;
    font-weight: 700;
    font-size: 20px;
    font-family: Microsoft JhengHei;
}

.doc .download .down-detail {
    float: right;
    width: 100%;
    min-height: 140px;
    background: #fff;
    background-position: 100% 100%;
    font-size: 14px
}

.doc .download .down-detail p {
    margin: 3px;
    padding: 5px 8px;
    border-bottom: 1px dotted #f3f3f5;
    text-indent: 0
}

.doc .download .down-detail p span {
    color: #9a9a9a;
}

.doc .download a {
    color: #56abee;
    font-weight: 700;
}

.doc .download p.down-tip a[href*='pan.baidu.com']:before, .doc .download p.down-tip a[href*='yun.baidu.com']:before {
    padding-left: 0;
    content: "\e90f"
}

.links {
    margin-bottom: 30px
}

.links .excerpt {
    padding: 10px 0;
    color: #adadad;
    font-size: 14px
}

.pager {
    overflow: hidden
}

.pager .box {
    margin: 0 auto;
    padding-right: 2pc;
    padding-left: 2pc;
    max-width: 75pc
}

.pager .box .nav_pagenum {
    margin: 0 auto;
    padding: 10px 15px;
    width: 90px;
    height: 40px;
    border: none;
    border-color: #34495e;
    border-radius: 4px;
    background-color: #bdc3c7;
    color: hsla(0, 0%, 100%, .75);
    text-align: center;
    font-weight: 400;
    opacity: .7;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
    filter: alpha(opacity=70)
}

.pager .box .prev {
    float: left;
    margin-top: 0
}

.pager .box .next {
    float: right;
    margin-top: -40px
}

.pager .box .next, .pager .box .prev {
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    background-color: #282828;
    color: #fff;
    font-weight: 400;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
    -webkit-font-smoothing: subpixel-antialiased
}

.none {
    padding: 0 1pc;
    padding-bottom: 50px;
    font-size: 20px;
    font-family: Simsun
}

.sidebar .demo_box {
    float: left;
    overflow: hidden;
    width: 20pc;
    background: #3ba4e1
}

.sidebar .demo_box .demo, .sidebar .demo_box .download {
    float: left;
    width: 10pc;
    height: 56px;
    border-right: 1px solid #1d91d3;
    text-align: center;
    font-size: 1pc;
    line-height: 56px
}

.sidebar .demo_box .demo a, .sidebar .demo_box .download a {
    display: block;
    color: #fff;
    font-size: 1pc
}

.sidebar .demo_box .demo a:hover, .sidebar .demo_box .download a:hover {
    background: #269add
}

.sidebar .custom {
    overflow: hidden;
    margin-bottom: 20px;
    width: 20pc;
    height: 249px;
    background-color: #2c7bb3;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#438FCA), to(#2C7BB3));
    background-image: -webkit-radial-gradient(circle, #438fca, #2c7bb3);
    background-image: -moz-radial-gradient(circle, #438fca, #2c7bb3);
    background-image: linear-gradient(top, #438fca, #2c7bb3)
}

.sidebar .custom span {
    display: block;
    padding-top: 45px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 30px
}

.sidebar .custom p {
    margin-top: 15px;
    margin-bottom: 30px;
    width: 20pc;
    color: #fff;
    text-align: center;
    font-size: 1pc
}

.sidebar .custom a {
    display: block;
    margin: 0 auto;
    padding: 7px 0;
    width: 75pt;
    border: 2px solid #fff;
    border-radius: 0;
    background: 0 0;
    color: #fff;
    text-align: center;
    font-size: 18px
}

.sidebar .custom a:hover {
    border-color: #fff;
    background: #fff;
    color: #179ef3
}

.widget {
    overflow: hidden;
    margin-bottom: 20px
}

.widget ul {
    list-style: none
}

.widget ul li {
    float: left
}

.div_ad {
    padding: 10px;
    border: 1px solid #f9f8f8
}

.div_tags {
    padding: 20px;
    background: #f8f8f8
}

.div_tags li {
    margin-right: 10px;
    padding: 5px 0
}

.div_tags li a sup {
    color: #e74b2c
}

.doc_comments {
    margin-top: 40px;
}

#comments .respond .cancel-comment-reply {
    float: right;
    margin-top: 0;
    font-size: 14px;
}

#comments .respond a {
    color: #56abee;
}

#comments .widget-title {
    color: #56abee;
    font-weight: bold;
}

#comment-form {
    padding-top: 10px;
    font-size: 14px;
}

#comment-form input {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    border: 0;
    padding: 0 5px;
    border-radius: 5px;
    background: #f1f1f1;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    font: inherit;
    -webkit-appearance: none;
    margin-bottom: 10px;
}

#comments #author, #comments #mail, #comments #url {
    width: 32.89%;
}

#comment-form textarea {
    background: #f1f1f1;
    padding: 10px;
    margin-top: 10px;
    vertical-align: top;
    margin: 0;
    width: 100%;
    line-height: 1.2;
    border: 1px solid #ececec;
    border-radius: 3px;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    font: inherit;
    -webkit-appearance: none;
}

#comment-form textarea::-webkit-input-placeholder {
    color: #636363;
}

#comment-form textarea:-moz-placeholder {
    color: #636363;
}

#comment-form textrea:-ms-input-placeholder {
    color: #636363;
}

#comment-form input#submit {
    cursor: pointer;
    background: #56abee;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin: 0 auto;
    border-radius: 3px;
    display: block;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#comment-form #submit.button {
    width: 100%;
    margin-top: .625rem;
}

.comments {
    margin-top: 10px;
}

.comments h4.title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    position: relative;
}

.comments .comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comments .comment-list li {
    margin: 10px 0;
    padding: 0;
    border-radius: 3px;
}

#comments .comment-author {
    display: block;
    margin-bottom: 5px;
    color: #444;
    font-size: 14px;
    font-weight: 500;
}

#comments .comment-author .avatar {
    float: left;
    margin: 0 10px 0 0;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    background-color: #f0f0f0;
    border: 2px solid #d8d8d8;
}

#comments .comment-author cite {
    line-height: 12px;
    font-style: normal;
}

#comments .comment-list li .comment-reply {
    font-size: 14px;
    font-weight: 500;
    margin-top: 3px;
    position: relative;
    width: 100%;
    margin-bottom: 5px;
    height: 20px;
    text-align: center;
}

#comments .comment-list li .comment-reply a {
    color: #fff;
    display: block;
    background: #000000;
    border-radius: 3px;
}

#comments .comment-list li .comment-reply a:hover {
    background: #4995d0;
}

#comments .comment-meta a {
    color: #999 !important;
    font-size: 14px;
    font-weight: 400;
}

#comments .comment-content {
    overflow: hidden;
    padding: 10px 0 0 0;
    word-wrap: break-word;
    line-height: 20px;
    font-size: 14px;
}

#comments .comment-children {
    padding-left: 30px;
    border-left: 5px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {
    .header .form {
        padding: 0 10px;
    }

    .grid-col {
        width: 100%;
    }

    .page-main {
        margin: 30px auto;
    }

    .links {
        padding: 0px;
    }

    .pager .box {
        padding: 0 10px;
    }

    .post {
        overflow: hidden;
        margin: 0 auto;
        padding: 20px 10px;
        width: 100%;
    }

    .post .doc {
        width: 100%;
        background: #fff;
        padding: 5px;
    }

    .sidebar {
        width: 100%;
    }

    .sidebar .demo_box {
        width: 100%;
    }

    .sidebar .demo_box .demo, .sidebar .demo_box .download {
        width: 50%;
    }

    .sidebar .custom {
        width: 100%;
    }

    .footer .grid {
        padding: 0
    }
}

@media (max-width: 320px) {

}
